<template>
  <starPage :config="pageConfig">
    <!-- <div class="i-layout-page-header">
            <PageHeader title="修改密码" content="" hidden-breadcrumb />
        </div> -->
    <Card
      :bordered="true"
      dis-hover
      class="ivu-mt"
      ref="card"
      style="width: 600px;margin: 0 auto;"
    >
      <Form
        ref="userInfoForm"
        :model="userInfo"
        :rules="userInfoRules"
        :label-width="160"
      >
        <FormItem label="旧密码" prop="oldPassword">
          <Input v-model="userInfo.oldPassword" type="password" clearable />
        </FormItem>
        <FormItem label="新密码" prop="newPassword">
          <Input v-model="userInfo.newPassword" type="password" clearable />
        </FormItem>
        <FormItem label="重复密码" prop="repeatPassword">
          <Input v-model="userInfo.repeatPassword" type="password" clearable />
        </FormItem>
        <div class="drawerFooter">
          <FormItem style="width: 300px; margin-top: 25px">
            <Button
              type="primary"
              :loading="loading"
              @click="handleUpdatePassword"
              >修改密码</Button
            >
          </FormItem>
        </div>
      </Form>
    </Card>
  </starPage>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "system-password",
  data() {
    return {
      loading: false,
      userInfo: {
        oldPassword: "",
        newPassword: "",
        repeatPassword: "",
      },
      userInfoRules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "旧密码长度不能少于6位",
            trigger: "blur",
          },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "新密码长度不能少于6位",
            trigger: "blur",
          },
        ],
        repeatPassword: [
          { required: true, message: "请输入重复密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "重复密码长度不能少于6位",
            trigger: "blur",
          },
        ],
      },
      userAccountObject: null,
    };
  },
  computed: {
    ...mapState("admin/layout", ["currentAccount"]),
    pageConfig() {
      return {
        title: {
          "en-US": "",
          "zh-CN": "修改密码",
        }[this.G_Locale],
        cols: null,
      };
    },
  },
  methods: {
    handleUpdatePassword() {
      this.$Modal.confirm({
        title: "是否确认修改密码",
        cancelText: "取消",
        content: `您确认要修改用户<strong>${this.currentAccount.userName}密码</strong>？`,
        loading: true,
        onOk: () => {
          this.updatePassword();
        },
        onCancel: () => {
          this.$Modal.remove();
          this.$Message.info("放弃修改");
        },
      });
    },
    updatePassword() {
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          let password = this.tools.md5(
            this.userInfo.oldPassword + this.$api.AccountUser.getSlat()
          );
          if (password !== this.currentAccount.password) {
            this.$Message.warning("用户旧密码输入有误，请重新输入！");
            return;
          }
          if (this.userInfo.newPassword !== this.userInfo.repeatPassword) {
            this.$Message.warning("用户重复密码与新密码不一致，请重新输入！");
            return;
          }
          if (this.submitting) return;
          this.submitting = true;
          this.loading = true;

          let newPassword = this.tools.md5(
            this.userInfo.newPassword + this.$api.AccountUser.getSlat()
          );
          this.$api.AccountUser.update({
            id: this.currentAccount.id,
            password: newPassword,
          })
            .then((res) => {
              this.userInfo = {
                oldPassword: "",
                newPassword: "",
                repeatPassword: "",
              };
            })
            .finally(() => {
              this.$Modal.remove();
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>
